<template>
  <borderBox8 style="width: 942px;height: 620px;">
    <div class="map" ref="map"></div>
  </borderBox8>
</template>
<script setup>
import { shallowRef, onMounted, ref } from 'vue'
import * as echarts from "echarts"
import usaJSON from "@/utils/usa.json"
import borderBox8 from './component/borderBox8/index.vue'
import { standardOrderMonth } from '@/api/bigData/map.js'
import usaLngLat from './config/usaLngLat.js'
const map = shallowRef()
const myMap = ref()

echarts.registerMap("usa", usaJSON, {
  Alaska: {
    left: -131,
    top: 25,
    width: 15
  },
  Hawaii: {
    left: -110,
    top: 28,
    width: 5
  },
  'Puerto Rico': {
    left: -76,
    top: 26,
    width: 2
  }
})

// 初始化地图数据
const init = async () => {
  let { result } = await standardOrderMonth()
  let mapData = []
  let scatterData = []
  let array = []
  result.records.forEach(data => {
    if(data.order_cnt - 0 > 0) {
      mapData.push({
        name: data.shipping_region,
        value: data.order_cnt
      })
      if(usaLngLat[data.shipping_region]) {
        array = [...usaLngLat[data.shipping_region]]
      }else {
        console.error('data.shipping_region', data.shipping_region)
      }
      array.push(data.order_cnt)
      scatterData.push(array)
    }
  })
  let option = initOption(mapData, scatterData)
  if(myMap.value) myMap.value.clear()
  //设置配置项
  myMap.value.setOption(option);
}

// 初始化option
const initOption = (mapData = [], scatterData = []) => {
  let option = {
    tooltip: {
      show: true,
      extraCssText: 'background: linear-gradient(to right, #032147, #0b3764, #032147);',
      textStyle: {
        color: "#fff"
      },
    },
    geo: {
      show: true,
      roam: true,
      map: 'usa',
      zoom: 1.2,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: true,
          color: '#fff'
        }
      },
      select: {
        label: {
          color: '#fff',
        },
        itemStyle: {

          areaColor: '#389BB7'
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: 'rgba(147, 235, 148, 0)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(147, 235, 348, .2)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
    },
    series: [
      {
        type: 'map',
        map: 'usa',
        name: '今日订单量',
        geoIndex: 0,
        data: mapData
      },
      {
        tooltip: {
          show: false
        },
        type: 'effectScatter',
        coordinateSystem: 'geo',
        symbolSize: function(val) {
          return (val[2] - 0) / 5 < 1 ? 4 : ((val[2] - 0) / 8) * 4
        }, // 增大闪烁波纹的大小
        rippleEffect: {
          scale: 6 // 设置波纹效果的放大倍数
        },
        itemStyle: {
          normal: {
            color: '#FFFDD0',
            borderWidth: 1,
            borderColor: '#FFFDD0'
          }
        },
        zlevel: 1,
        data: scatterData
      },
    ],
  }

  return option
}

onMounted(() => {
  myMap.value = echarts.init(map.value);
  init()
})

defineExpose({
  init
})
</script>

<style scoped>
body {
  color: white
}

.map {
  height: 620px;
  width: 100%;
}
</style>
